<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" data-th-href="@{static/bootstrap/css/bootstrap.css}">
<script type="text/javascript" data-th-src="@{webjars/jquery/3.0.0/jquery.js}"></script>
<script type="text/javascript" data-th-src="@{static/bootstrap/js/bootstrap.js}"></script>
<!-- <script type="text/javascript" data-th-src="@{static/js/md5.min.js}"></script> -->
<title>登录</title>
<style type="text/css">
	*{
		margin: 0px;
		padding: 0px;
	}
	#logo{
		background: url(static/img/login.jpg) no-repeat;
		background-size: cover;	
	}
	@media (min-width: 1000px) {
		#myForm{
			width: 32%;
			padding-top: 20px;
			padding-bottom: 50px;
			background: #000000;
			position:absolute;
			margin-top: 7%;
			margin-left: 62%;
			border-radius: 8px;
			opacity: 0.7;
		}
	}
	@media (max-width: 1000px) {
		#myForm{
			width: 90%;
			padding: 20px 40px;
			padding-bottom: 50px;
			background: #000000;
			position:absolute;
			margin-top: 7%;
			margin-left: 5%;
			border-radius: 8px;
			opacity: 0.7;
		}
		#btn{
			margin-top: 20px;
		}
	}
	#myForm form{
		color: #DDDDDD;
	}
	h1{
		font-family: "楷体";
		margin-top: 20px;
		color: red;
		margin-left: 50px;
	}
	#password {
		background: url(static/img/password.png) no-repeat left #fff;
		text-indent: 1em;
	}
	
	#username {
		background: url(static/img/username.png) no-repeat left #fff;
		text-indent: 1em;	
	}
	#btn{
		border-radius: 8px;
		width: 65%;
		padding: 10px 0px;
		background: #999933;
		font-size: 20px;
	}
	#btn:hover{
		color: white;
		background: #1B6D85;
	}
	span:hover{
		cursor: pointer;
	}
	.form-group{
		height: 40px;
	}
</style>
</head>
<body>
	<div style="height: 80px;">
		<h1>媒体资源共享平台</h1>
	</div>
	<div id="logo">
		<div id="myForm">
			<form action="login" method="post" onsubmit="return abc();" class="form-horizontal">
				<h1>登录</h1><center><hr style="width: 90%;" /></center>
				<center>
					<p data-th-if="${param.logout}">已成功注销</p>
					<p data-th-if="${param.error}">用户名或密码错误</p>
				</center><br>
				<div class="form-group">
					<label for="username" class="col-md-3 col-sm-3 control-label">账号：</label>
					<div class="col-md-7 col-sm-7">
						<input name="pig" id="username" type="text" value="" autocomplete="off" class="form-control" placeholder="用户名">
					</div>
				</div><br>
				<div class="form-group">
					<label for="pass" class="col-md-3 col-sm-3 control-label">密码：</label>
					<div class="col-md-7 col-sm-7">
						<input id="password" type="password" value="" autocomplete="off" class="form-control" placeholder="密码">
						<input type="hidden" id="pwd" name="dog" value=""/>
					</div>
				</div><br>
				<center><button id="btn" type="submit">登录</button></center>
			</form>				
		</div>
	</div>

	
<script type="text/javascript">
	$(function(){
		var a = window.innerHeight - 100 + "px";
		$("#logo").css('height', a);
	});
	$(window).resize(function(){
	    var a = window.innerHeight - 100 + "px";
		$("#logo").css('height', a);
	});
	
	
	function abc(){
		var username=$('#username').val();
		var pwd=$('#password').val();
		pwd=encode64(pwd);
		$('#pwd').val(pwd);
		return true;
	}
	
	
	var keyStr = "ABCDEFGHIJKLMNOP" + "QRSTUVWXYZabcdef" + "ghijklmnopqrstuv"
			+ "wxyz0123456789+/" + "=";
	function encode64(input) {
		var output = "";
		var chr1, chr2, chr3 = "";
		var enc1, enc2, enc3, enc4 = "";
		var i = 0;
		do {
			chr1 = input.charCodeAt(i++);
			chr2 = input.charCodeAt(i++);
			chr3 = input.charCodeAt(i++);
			enc1 = chr1 >> 2;
			enc2 = ((chr1 & 3) << 4) | (chr2 >> 4);
			enc3 = ((chr2 & 15) << 2) | (chr3 >> 6);
			enc4 = chr3 & 63;
			if (isNaN(chr2)) {
				enc3 = enc4 = 64;
			} else if (isNaN(chr3)) {
				enc4 = 64;
			}
			output = output + keyStr.charAt(enc1) + keyStr.charAt(enc2)
					+ keyStr.charAt(enc3) + keyStr.charAt(enc4);
			chr1 = chr2 = chr3 = "";
			enc1 = enc2 = enc3 = enc4 = "";
		} while (i < input.length);
		return output;
	}
</script>
</body>
</html>